<template>
    <div 
   @contextmenu.prevent.stop=""
    class="dirwrap shadow  bg-white rounded" 
    :class="{'selected': cur == indexOfItem}"
    >
        <div 
        @contextmenu.prevent.stop=""
        :data-index="indexOfItem" class="dirImg">
            <!-- 目录 -->
            <span 
            v-if="dirItem.type == 0 "
            :data-index="indexOfItem" 
            @contextmenu.prevent.stop=""
            class="iconfont icon-dir" ></span>
            <!-- 文章 -->
            <span 
            v-if="dirItem.type == 1 "
            :data-index="indexOfItem" 
            @contextmenu.prevent.stop=""
            class="iconfont icon-file" ></span>
        </div>
        <div @contextmenu.prevent.stop=""  class="dirInfo">
            <div @contextmenu.prevent.stop="" :data-index="indexOfItem" class="dirInfo-title">
                {{dirItem.title}}
            </div>
        </div>
        <!-- 点击蒙板 -->
        <label class="popwrap" 
        :for="`popinpt${indexOfItem}`"
        :data-index="indexOfItem"
        
        @contextmenu.prevent="rightClick( $event )" >
         
        </label>
        <!-- 右键菜单 -->
        <div class="popMenu"
        @contextmenu.prevent.stop=""
        :style="`
        display: ${popMenu.show} !important;
        left: ${popMenu.y}px !important;
        top: ${popMenu.x}px !important;
        `"
        >  
            <!-- 查看文件 -->
            <div 
             v-if="dirItem.type == 1 "
            @contextmenu.prevent.stop=""
            :data-index="indexOfItem"
            @click.stop="checkoutFile( $event )"
            class="popMenu-item">查看</div>
            <!-- 文件编辑 -->
            <div 
             v-if="dirItem.type == 1 "
            @contextmenu.prevent.stop=""
            :data-index="indexOfItem"
            @click.stop="editFile( $event )"
            class="popMenu-item">编辑</div> 
            <!-- 重名名 -->
            <div 
            @contextmenu.prevent.stop=""
            :data-index="indexOfItem"
            @click.stop="reNameOfInnerDir( $event)"
            class="popMenu-item">重命名</div>
            <!-- 删除 -->
            <div class="popMenu-item"
            @contextmenu.prevent.stop=""
            :data-index="indexOfItem"
            @click.stop="removeDir( $event )"
            >删除</div>
        </div>
        <input :id="`popinpt${indexOfItem}`" 
        @focus="getFocus"
        @blur="loseFocus"
        class="hidden" type="text">
    </div>
</template>

<script>
import { freshToken } from "../../../../../api/interface/token.js";
import { getInnerDirContent } from "../../../../../api/interface/filesystem.js";
export default {
    props:["dirItem", "indexOfItem" , 'cur'],
    data(){
        return {
           
           popMenu:{
               x: 0,
               y: 0,
               show: "none",
               focus: false,
               timeoutId: null
           }
        };
    },
    inject:['explorer'],
    methods:{
        //右键菜单 
        rightClick(e){
            this.explorer().current = e.target.dataset.index;
            
            this.popMenu.show = "block";
            this.popMenu.y = e.offsetX;
            this.popMenu.x = e.offsetY;
            e.target.focus();
        },
        // 关闭右键菜单
        closeMenu(){

        },
        getFocus(){
            clearTimeout(this.popMenu.timeoutId);
        },
        //失去焦点
        loseFocus(){
            let that = this;
            this.popMenu.timeoutId = setTimeout(function(){
                that.popMenu.show = "none";
            }, 120);
            // this.popMenu.show = "none";
            
        },
        //递归删除子目录
        removeDir( e ){
            // this.popMenu.focus = true;
            let index = e.target.dataset.index;
            this.$emit("rmThis", index);
        },
        //重命名子目录
        reNameOfInnerDir( e ){
            let index = e.target.dataset.index;
            this.$emit("renameInner", index );
        },
        //查看文件
        checkoutFile(e){
            
            let index = e.target.dataset.index;
            
            this.$emit("checkout", index);
            
        },
        //编辑文件
        editFile(e){
            
            let index = e.target.dataset.index;
            this.$emit("editor", index);
        }
    },
    mounted() {  
    }
}
</script>

<style lang="scss">

.dirwrap{
    display: inline-block;
    position: relative;
    width: 99px;
    // height: 7em;
    margin: .3em;
    text-align: center;
    .dirImg{
        display: inline-block;
    }
    .dirInfo{
        width: 80%;
        margin: .2em auto;
        .dirInfo-title{
            display: block;
            height: 4.5em;
            text-align: center;
            word-wrap:break-word; 
        }
        
    }
    .popwrap{
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        margin-bottom: 0 !important;
    }
    
}




.icon-dir::before{
    content: "\e614";
    font-size: 3em;
    line-height: 1.5em;
    margin-left: .3em;
    margin-right: .3em;
}

.icon-file::before{
    content: "\e625";
    font-size: 3em;
    line-height: 1.5em;
    margin-left: .3em;
    margin-right: .3em;
}

.selected{
    outline: 1px solid burlywood;
}


</style>